<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :mask-closable="false"
    :destroy-on-close="true"
    @close="onClose"
  >
    <TaskTitle icon-name="Edit" title-name="编辑商机" color="blue" />
    <div class="list-container">
      <p-tabs
        :animated="false"
        class="tabs-container"
        default-active-key="1"
        @change="callback"
      >
        <p-tab-pane key="1" tab="基本信息">
          <div class="list-main">
            <FormBusinessInfo ref="form" :form="form" @clear-list="clearList" />
            <BottomLine />
          </div>
        </p-tab-pane>
        <p-tab-pane key="2" tab="商机阶段">
          <TabBusinessTable :data-source="detail.opportunityStageList" />
        </p-tab-pane>
        <p-tab-pane key="3" tab="产品">
          <TableProduct :opportunity-id="planId" />
        </p-tab-pane>
        <p-tab-pane key="4" tab="联系人">
          <TableLinkman
            :opportunity-id="planId"
            :customer-code="detail.customerCode"
          />
        </p-tab-pane>
        <p-tab-pane key="5" tab="销售团队">
          <TableSaleTeam :opportunity-id="planId" />
        </p-tab-pane>
        <p-tab-pane key="6" tab="拜访记录">
          <TableCall
            :opportunity-id="planId"
            :detail="detail"
            :opportunity-no="detail.opportunityNo"
          />
        </p-tab-pane>
        <p-tab-pane key="7" tab="合同">
          <TableContract
            :opportunity-id="planId"
            :opportunity-no="detail.opportunityNo"
            :customer-short-name="detail.customerShortName"
            :opportunity-name="detail.opportunityName"
            :customer-code="detail.customerCode"
          />
        </p-tab-pane>
        <p-tab-pane key="8" tab="附件">
          <TableAccessory
            type="business"
            :leads-no="planId"
            :opportunity-id="planId"
          />
        </p-tab-pane>
      </p-tabs>
    </div>
    <ButtonGroup
      class="footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
  </p-drawer>
</template>

<script>
import { postBusinessSave, postBusinessAdd } from '@/api/business.js';
import DrawerMixin from './mixin';
import FormBusinessInfo from '@/components/task/FormBusinessInfo.vue';
import TableProduct from '@/components/task/TableProduct.vue';
import TableLinkman from '@/components/task/TableLinkman.vue';
import TableSaleTeam from '@/components/task/TableSaleTeam.vue';
import TableCall from '@/components/task/TableCall.vue';
import TableAccessory from '@/components/task/TableAccessory.vue';
import TableContract from './TableContract.vue';
import TabBusinessTable from './TabBusinessTable.vue';
export default {
  components: {
    FormBusinessInfo,
    TableProduct,
    TableLinkman,
    TableSaleTeam,
    TableCall,
    TableAccessory,
    TableContract,
    TabBusinessTable,
  },
  mixins: [DrawerMixin],
  data() {
    return {
      form: {
        leadsNo: '',
        leadsName: '',
        leadsSource: '',
        crustItemName: '',
        crustItemNo: '',
        crustItemStep: '',
        itemDemandNum: '',
        expectPrice: '',
        expectCost: '',
        expectQuantity: '',
        salesOrgCode: '',
        salesGroupCode: '',
        // pmGroupCode: '',
        pmGroup: {
          key: '',
          label: '',
        },
        pm: {
          key: '',
          label: '',
        },
        salesOrg: {
          key: '',
          label: '',
        },
        salesGroup: {
          key: '',
          label: '',
        },
        customerName: '',
        assessLevel: '',
        customerCode: '',
        appCategory: '',
        salesAreaName: '',
        remark: '',
        createUserId: '',
        createTime: '',
        updateTime: '',
        updateUserName: '',
        customerShortName: '',
        updateDeptId: '',
        createDeptId: '',
        updateDeptName: '',
        createDeptName: '',
        competitor: '',
        processStatus: '',
        opportunityName: '',
        opportunityNo: '',
        opportunityStage: '',
        expectShare: '',
        expectTime: '',
        state: '',
        salesUserId: this.uid,
        // pmGroupName: 'KAPM三组',
        salesName: this.user,
        stageStatus: '',
      },
      disabled: false,
      user: this.$store.state.user.name,
      uid: this.$store.state.user.uid,
    };
  },

  computed: {
    columns() {
      return [
        {
          align: 'center',
          title: '商机阶段',
          dataIndex: 'businessNode',
        },
        {
          align: 'center',
          title: '负责人',
          dataIndex: 'principal',
        },
        {
          align: 'center',
          title: '阶段状态',
          dataIndex: 'handleState',
        },
        {
          align: 'center',
          title: '耗时',
          dataIndex: 'time',
        },
        {
          align: 'center',
          title: '部门',
          dataIndex: 'orgName',
        },
        {
          align: 'center',
          title: '职位',
          dataIndex: 'positionName',
        },
      ];
    },
    footerButtons() {
      if (this.detail.stage === '0') {
        return [
          {
            key: 'submit',
            type: 'primary',
            label: '商机信息确认',
          },
          {
            key: 'save',
            label: '保存',
            disabled: this.disabled,
          },
          {
            key: 'close',
            label: '返回',
          },
        ];
      } else {
        return [
          {
            key: 'save',
            label: '保存',
            disabled: this.disabled,
          },
          {
            key: 'close',
            label: '返回',
          },
        ];
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) return;
        const business = this.detail || {};
        this.form = {
          id: business.id,
          leadsNo: business.leadsNo || '',
          leadsName: business.leadsName || '',
          leadsSource: business.leadsSource || '',
          crustItemName: business.crustItemName || '',
          crustItemNo: business.crustItemNo || '',
          crustItemStep: business.crustItemStep || '',
          itemDemandNum: business.itemDemandNum || '',
          expectPrice: business.expectPrice || '',
          expectCost: business.expectCost || '',
          expectQuantity: business.expectQuantity || '',
          salesOrgCode: business.salesOrgCode || '',
          salesGroupName: business.salesGroupName || '',
          // pmGroupCode: business.pmGroupName || '',
          customerName: business.customerName || '',
          assessLevel: business.assessLevel || '',
          appCategory: business.appCategory || '',
          salesAreaName: business.salesAreaName || '',
          salesName: business.salesName || '',
          pmName: business.pmName || '',
          remark: business.remark || '',
          createUserName: business.createUserName || '',
          createTime: business.createTime || '',
          updateTime: business.updateTime || '',
          createDeptName: business.createDeptName || '',
          updateDeptName: business.updateDeptName || '',
          updateUserName: business.updateUserName || '',
          customerCode: business.customerCode || '',
          customerShortName: business.customerShortName || '',
          competitor: business.competitor || '',
          processStatus: business.processStatus || '',
          opportunityName: business.opportunityName || '',
          opportunityNo: business.opportunityNo || '',
          stage: business.stage || '',
          expectShare: parseFloat(business.expectShare) || '',
          expectTime: business.expectTime || '',
          state: business.state || '',
          stageStatus: business.stageStatus || '',
          salesUserId: business.salesUserId || '',
          pmUserId: 'dainianguo',
          // pmGroupName: 'KAPM三组',
          pmGroup: {
            key: business.pmGroupCode || '',
            label: business.pmGroupName || '',
          },
          pm: {
            key: business.pmUserId || '',
            label: business.pmName || '',
          },
          salesOrg: {
            key: business.salesOrgCode,
            label: business.salesOrgName,
          } || {
            key: '',
            label: '',
          },
          salesGroup: {
            key: business.salesGroupCode,
            label: business.salesGroupName,
          } || {
            key: '',
            label: '',
          },
        };
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    async callback(key) {
      key === '1' ? (this.disabled = false) : (this.disabled = true);
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('fresh');
    },
    async checkData() {},
    async submitData(operating) {
      const valid = await this.$refs.form.validate();
      if (!valid) return new Promise(() => {});
      if (operating) {
        try {
          await this.$confirm(
            '确定提交吗？提交后将进入“商机信息确认”阶段，且不能再更改商机信息'
          );
          await postBusinessAdd({
            ...this.form,
            processId: this.processId,
            auditNo: this.detail.auditNo,
            pmGroupName: this.form.pmGroup?.label,
            pmGroupCode: this.form.pmGroup?.key,
            pmName: this.form.pm?.label,
            pmUserId: this.form.pm?.key,
          });
          this.$message.success('提交成功！');
          this.closeCallback();
        } catch (error) {
          // console.log('error: ', error);
        }
      } else {
        // 保存
        await postBusinessSave({
          bizModule: 'biz',
          ...this.form,
          processId: this.processId,
          pmGroupName: this.form.pmGroup?.label,
          pmGroupCode: this.form.pmGroup?.key,
          pmName: this.form.pm?.label,
          pmUserId: this.form.pm?.key,
        });
        this.$message.success('保存成功！');
        this.closeCallback();
      }
    },
    // 提交
    async submitCallback() {
      await this.submitData(1);
    },
    // 保存
    async saveCallback() {
      await this.submitData(0);
    },
    // 返回
    closeCallback() {
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e6e9;
}
.list-container {
  height: calc(100% - 110px);
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
}
.list-main {
  height: calc(100% - 400px);
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 24px;
}
/deep/ .poros-drawer-body {
  min-width: 1136px;
  height: 100%;
  padding: 0;
}
.progress-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.tabs-container {
  height: 100% !important;
  overflow-y: scroll;
}
</style>
